{% extends 'base-layui.html' %}

{% block header %}
  <h1>{% block title %}数据库表结构比对系统{% endblock %}</h1>
  <!-- 引入 layui.js -->
<!--<link rel="stylesheet" href="layui/js/layui.js">-->
{% endblock %}

{% block leftcatalog %}
<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item"><a href="/configDatabaseSource">配置数据源</a></li>
  <li class="layui-nav-item"><a href="/configCompareTask">配置比对任务</a></li>
  <li class="layui-nav-item"><a href="javascript:;">表差异比对</a></li>
  <li class="layui-nav-item"><a href="/compareColumn">字段差异比对</a></li>
  <li class="layui-nav-item layui-this">
    <a href="/compare">所有表及字段信息</a>
  </li>

  <!-- 更多菜单 -->
</ul>
{% endblock %}

{% block maincontent %}
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
{% endblock %}

{% block script %}
<script>

var load = layer.msg('加载中...', {
    icon: 16,
    shade: [0.1, '#fff'],
    time: false  //取消自动关闭
});

layui.use(function(){
  var $ = layui.$;
  var table = layui.table;
  var layer = layui.layer;

  // 渲染
  table.render({
    elem: '#ID-table-demo-editmodes',
    url: '/getCompareData',  // 此处为静态模拟数据，实际使用时需换成真实接口
    // page: true,
    page : {
        //limits :[10,20,50,100]
        //count: data.length             //数据总数
        limit : 10 //每页显示条数
        ,
        limits : [ 10, 20, 50, 100, 1000 ],
        curr : 1 //起始页
        ,
        groups : 5 //连续页码个数
        ,
        prev : '上一页' //上一页文本
        ,
        next : '下一页' //下一页文本
        ,
        first : 1 //首页文本
        //, last: 100                     //尾页文本
        ,
        layout : [ 'prev', 'page', 'next',
                'refresh', 'skip', 'count',
                'limit' ]
    },
    height : 800,
    css: [ // 设置单元格样式
      // 取消默认的溢出隐藏，并设置适当高度
      '.layui-table-cell{height: 50px; line-height: 40px;}',
      '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
      '.layui-table-cell select{height: 36px; padding: 0 5px;}'
    ].join(''),
    cols: [[ // 表头
      {field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'},
      {field: 'source', title: '数据源名称', width:180, align: 'center', fixed: 'left'},
      {field: 'schema', title: 'schema', width:100, align: 'center', fixed: 'left'},
      {field: 'table_name', title: '表名', width:250, align: 'left', fixed: 'left'},
      {field: 'table_comment', title: '表注释', width:150, align: 'left'},
      {field: 'column_name', title: '字段名', width:250, align: 'left'},
      {field: 'data_type', title: '字段类型', width:100, align: 'left'},
      {field: 'data_length', title: '字段长度', width:90, align: 'left'},
      {field: 'data_default', title: '默认值', width:250, align: 'left'},
      {field: 'nullable', title: '可为空', width:80, align: 'center'},
      {field: 'pkey', title: '是否为主键', width:100, align: 'center'},
      {field: 'column_comment', title: '字段注释', width:250, align: 'left'},
      {field: 'creation_date', title: '记录时间', width:120, align: 'left'}
    ]],
    loading : true,
    // toolbar : true,
    toolbar: '#toolbarDemo',
    done: function(res, curr, count){
      var options = this;
      layer.close(load);
    }
  });

  // 监听页码事件
  table.on('page(filter)', function(obj){
    // 显示loading
    var loading = layer.load(2, {
      shade: [0.2,'#fff'] //0.2透明度的白色背景
    });

    // 模拟数据加载
    setTimeout(function(){
      layer.close(loading); //关闭loading
      // 重新加载表格数据
      table.reload('#ID-table-demo-editmodes', {
        page: {
          curr: obj.curr //获取当前页
        }
        ,where: {
          // 传递额外参数，如页面大小等
        }
      });
    },1000); //模拟数据加载时间
  });

});
</script>
{% endblock %}

